<template>
  <div>
    <div v-for="item in data" :key="item.id">
      <img :src="item.scene_pic_url" alt="" />
      <span>{{ item.title }}</span><br />
      <span>{{ item.subtitle }}</span>
      <br />
      <span>{{ item.price_info }}元</span>
    </div>
    <van-pagination v-model="currentPage" :items-per-page="pageSize" :page-count="totalPages" mode="simple"
      @change="changefn" />
  </div>
</template>

<script>
import Vue from "vue";
import { Pagination } from "vant";

Vue.use(Pagination);
import { topiclist } from "@/api/zhuanti";
export default {
  name: "",
  data() {
    return {
      data: [],
      currentPage: 1,
      pageSize: 10,
      totalPages: 2,
    };
  },
  created() {
    // 当前页面刚加载出来就需要渲染到页面上所以  在生命后期里面调用一下
    this.changefn()
  },
  methods: {
    changefn() {
      topiclist({ page: this.currentPage, size: this.pageSize }).then((res) => {
        console.log(res);
        if (res.errno == 0) {
          this.data = res.data.data;
          this.totalPages = res.data.totalPages;
          this.pageSize = res.data.pageSize;
          this.currentPage = res.data.currentPage;
          // 返回顶部
          document.documentElement.scrollTop = 0;
        }
      });
    },


  },
};
</script>
<style scoped>

</style>